<!DOCTYPE html>
<html>

<head>
    <include file="public@head"/>
</head>

<body class="layui-layout-admin">
<include file="public@header"/>
<include file="public@side"/>
<div class="layui-body">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">
                {$page_title}
                <div class="layui-btn-group fr">
                    <a class="layui-btn layui-btn-sm layui-btn-normal" href="{:url('add')}">添加分类</a>
                </div>
            </div>
            <div class="layui-card-body">
                <table class="layui-hide" id="categorys" lay-filter="categorys"></table>

                <script type="text/html" id="statusTpl">
                    <input type="checkbox" lay-skin="switch" {{ d.status==1 ? 'checked' : '' }} lay-filter="switch" data-url="{:url('doSwitch')}?id={{d.id}}&field=status" lay-text="显示|隐藏">
                </script>
                <script type="text/html" id="nameTpl">
                    {{d.tab}} {{d.name}}
                </script>

                <script type="text/html" id="barTpl">
                    <a class="layui-btn layui-btn-sm layui-btn-warm" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</a>
                </script>
            </div>
        </div>
    </div>
</div>
<include file="public@scripts"/>
<script>
    var table = layui.table;

    table.render({
        elem: '#categorys',
        url: "{:url('category/apiGetCategorys')}",
        cols: [
            [
                {field: 'id', width: 60, title: 'ID', align: 'center'},
                {field: 'list_order', title: '排序', width: 90, edit: 'text', align: 'center'},
                {field: 'name', title: '分类名称', edit: 'text', templet: '#nameTpl'},
                {field: 'goods_count', title: '文章统计', sort: true, align: 'center'},
                {field: 'status', title: '状态', width: 120, templet: '#statusTpl', unresize: true, align: 'center'},
                {title: '操作', toolbar: '#barTpl', align: 'center',width: 180 }
            ]
        ]
    });

    table.on('edit(categorys)', function (obj) {
        $.ajax({
            type: "post",
            url: "{:url('updateField')}?id=" + obj.data.id + "&field=" + obj.field + "&value=" + obj.value,
            async: true
        });
    });

    //监听工具条
    table.on('tool(categorys)', function (obj) {
        var data = obj.data;
        var layEvent = obj.event;
        if (layEvent === 'edit') {
            window.location.href = "{:url('edit')}?id=" + data.id;
        } else if (layEvent === 'delete') {
            layer.confirm('您将彻底删除【' + data.name + '】', function (index) {
                obj.del();
                layer.close(index);
                $.ajax({
                    type: "post",
                    url: "{:url('delete')}?id=" + data.id + "&real=" + 1,
                    async: true
                });
            });
        } else if (layEvent === 'setSeoDes') {
            layer.prompt({
                formType: 2,
                title: '修改 [' + data.name + '] 的SEO描述',
                value: data.description
            }, function (value, index) {
                layer.close(index);
                $.ajax({
                    type: "post",
                    url: "{:url('updateField')}?id=" + data.id + "&field=description&value=" + value,
                });
                obj.update({
                    seo_description: value
                });
            });
        } else if (layEvent === 'setKeyword') {
            layer.prompt({
                formType: 2,
                title: '修改 [' + data.name + '] 的SEO关键词',
                value: data.keywords
            }, function (value, index) {
                layer.close(index);
                $.ajax({
                    type: "post",
                    url: "{:url('updateField')}?id=" + data.id + "&field=keywords&value=" + value,
                });
                obj.update({
                    seo_keywords: value
                });
            });
        }
    });
</script>
</body>

</html>
